<template>
  <div class="top_box">


    <div class="box">

      <div class="user_info_box">
        <div style="width: 100%;text-align: center;height: 130px">
          <el-image class="title_img" :src="userIfo.titleImg"></el-image>
          <div>{{ userIfo.realName }}</div>
        </div>
        <div class="user_cloumn_box">
          <div>昵称：</div>
          <div>{{ userIfo.nickName }}</div>
        </div>

        <div class="user_cloumn_box">
          <div>邮箱：</div>
          <div>{{ userIfo.email }}</div>
        </div>

        <div class="user_cloumn_box">
          <div>手机号：</div>
          <div>{{ userIfo.phone }}</div>
        </div>

        <div class="user_cloumn_box">
          <div>生日：</div>
          <div>{{ userIfo.birthday }}</div>
        </div>

        <div class="user_cloumn_box">
          <div>性别：</div>
          <div v-if="userIfo.sex==1">男</div>
          <div v-if="userIfo.sex==2">女</div>
        </div>
      </div>


      <div class="update_box">
        <avue-tabs :option="option" @change="handleChange"></avue-tabs>
        <span v-if="type.prop==='info'">
          <el-form ref="form" :inline="true" :model="userIfo" label-width="80px" :rules="rules">
              <el-form-item prop="nickName" label="昵称">
                 <el-input style="width:400px" v-model="userIfo.nickName"></el-input>
              </el-form-item>
            <el-form-item prop="realName" label="真实姓名">
                 <el-input style="width:400px" v-model="userIfo.realName"></el-input>
              </el-form-item>
            <el-form-item prop="email" label="邮箱">
                 <el-input style="width:400px" v-model="userIfo.email"></el-input>
              </el-form-item>
            <el-form-item prop="phone" label="手机号">
                 <el-input style="width:400px" v-model="userIfo.phone"></el-input>
              </el-form-item>
            <el-form-item prop="birthday" label="生日">
                 <el-input style="width:400px" v-model="userIfo.birthday"></el-input>
              </el-form-item>
            <el-form-item prop="sex" label="性别" style="width:400px">
              <template>
                <el-radio v-model="userIfo.sex" label="1">男</el-radio>
                <el-radio v-model="userIfo.sex" label="2">女</el-radio>
              </template>
              </el-form-item>
            <el-form-item style="line-height: 100px" label="头像">
                 <el-input v-model="userIfo.titleImg" v-show="false"></el-input>
              <el-upload style="width:550px"
                         class="avatar-uploader"
                         :action="action"
                         :headers="headers"
                         :show-file-list="false"
                         :on-success="handleAvatarSuccess">
                <img style="width: 100px;height: 100px;border-radius: 100%" v-if="userIfo.titleImg"
                     :src="userIfo.titleImg"
                     class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <div style="width:500px;height: 100px">
                  <el-button @click="submit" style="position: absolute;right: 0;bottom: 0;width: 100px" type="success">提交</el-button>
              </div>
            </el-form-item>

          </el-form>

        </span>
        <!--    修改密码-->
        <span v-else-if="type.prop==='password'">
      <el-form ref="passwordForm" :model="userPassword" label-width="80px" :rules="passwordRules">
        <el-form-item prop="phone" label="原密码">
          <el-input type="password" style="width:500px" v-model="userPassword.oldPassword"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="新密码">
          <el-input type="password" style="width:500px" v-model="userPassword.newPassword"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="确认密码">
          <el-input type="password" style="width:500px" v-model="userPassword.againPassword"></el-input>
        </el-form-item>
        <el-form-item>
                  <el-button @click="restPassword" type="success">提交</el-button>
              </el-form-item>
      </el-form>
        </span>
      </div>


    </div>

    <div class="record">
      <ul
          class="list"
          v-infinite-scroll="load">
        <li v-for="(item,index) in logs" :key="index" class="list-item">
          <el-tag>
            {{ item.createTime }} 访问：{{ item.remark }} IP：{{ item.ip }} 浏览器：{{ item.browser }}
          </el-tag>
        </li>
      </ul>
      <p v-if="loading">加载中...</p>
      <p style="text-align: center;color: #9e9898;font-size: 15px" v-if="noMore">没有更多了</p>
    </div>
  </div>
</template>
<script>
import {restPassword, updateUserInfo, userInfo} from "@/api/system/user"
import {pageList} from "@/api/monitor/log"
import {getToken} from '@/util/auth'

export default {
  data() {
    return {
      logs: [],
      page: {
        pageSize: 6,
        currentPage: 1,
      },
      loading: false,
      noMore: false,
      count: 10,
      userPassword: {
        oldPassword: "",
        newPassword: "",
        againPassword: ""
      },
      passwordRules: {
        oldPassword: [{required: true, message: '请输入原密码', trigger: 'blur'}],
        newPassword: [{required: true, message: '请输入新密码', trigger: 'blur'}],
        againPassword: [{required: true, message: '请确认密码', trigger: 'blur'}],
      },
      rules: {
        nickName: [{required: true, message: '请输入昵称', trigger: 'blur'}],
        realName: [{required: true, message: '请输入真实姓名', trigger: 'blur'}],
        email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
        phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        birthday: [{required: true, message: '请输入生日', trigger: 'blur'}],
        sex: [{required: true, message: '请选择性别', trigger: 'blur'}],
      },
      headers: {Authorization: getToken()},
      action: process.env.VUE_APP_BASE_URL + "/system/upload/file",
      form: {},
      userIfo: {},
      type: {},
      option: {
        column: [{
          icon: 'el-icon-setting',
          label: '修改资料',
          prop: 'info',
        }, {
          icon: 'el-icon-refresh',
          label: '修改密码',
          prop: 'password',
        },
        ]
      }
    }
  },
  computed: {},
  created() {
    this.type = this.option.column[0];
    userInfo().then((res) => {
      this.userIfo = res.data.data
    })
    this.getUserLogs()
  },
  methods: {
    getUserLogs() {
      pageList(this.page.currentPage, this.page.pageSize).then(res => {
        const data = res.data.data;
        this.logs = data.records;
      })
    },
    load() {
      if (this.noMore) {
        return
      }
      this.page.currentPage = this.page.currentPage + 1

      pageList(this.page.currentPage, this.page.pageSize).then(res => {
        if (res.data.data.records.length != 0) {
          const data = res.data.data;
          let logs = this.logs;
          this.logs = logs.concat(data.records)

        } else {
          this.noMore = true
          this.page.currentPage = this.page.currentPage + 1
        }

      })
    },
    restPassword() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          if (this.userPassword.newPassword !== this.userPassword.againPassword) {
            this.$message({
              type: "error",
              message: "二次密码输入不同，请重新输入",
            });
            return;
          } else {
            restPassword(this.userPassword).then(() => {
              this.$message({
                type: "success",
                message: "修改密码成功，请重新登录",
              });
            })
          }

        } else {
          return
        }

      })
    },
    handleChange(column) {
      this.type = column
    },
    handleAvatarSuccess(e) {
      this.userIfo.titleImg = e.data
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          updateUserInfo(this.userIfo).then((res) => {
            userInfo().then((res) => {
              this.userIfo = res.data.data
            })
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          })
        } else {
          return
        }
      })
    }
  }
};
</script>
<style>
.font {
  display: block;
  background: #313638;
  padding: 5px;
  border-radius: 5px;
  color: white
}

.top_box {
  padding: 20px;
  overflow: auto;
}

.box {
  display: flex;
  width: 1640px;
}

.user_info_box {
  width: 305px;
  height: 400px;
  background: white;
  border-radius: 5px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.5);
}

.update_box {
  width: 1190px;
  height: 400px !important;
  background: white;
  margin-left: 5px;
  border-radius: 5px;
  padding: 10px 20px;
}

.record {
  width: 40%;
  height: 340px;
  background: white;
  border-radius: 5px;
  margin-top: 15px;
  overflow-y: scroll;
  font-size: 10px;
  padding: 0 30px;
}

.title_img {
  width: 80px;
  height: 80px;
  margin: 5px auto;
  border-radius: 100%;
}

.user_cloumn_box {
  padding: 0px 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(122, 122, 122, 0.1);
  font-size: 13px;
  color: rgba(122, 122, 122, 0.8);
  height: 32px;
  line-height: 31px;
}

ul {
  padding: 0;
}

.list-item {
  padding: 0 10%;
  width: 100%;
  background: #e8e4e4;
  list-style: none;
  height: 50px;
  margin: 5px 0;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
}
</style>
